<template>
  <div>
    <tableTpl
      :data="data"
      :columns="columns1"
      v-on:changeItem="changeItem"
      :tableLoading="loading"
    >
      <div slot="table_nav" v-if="current_index > 4">
        <a-tabs type="card" @change="getData" v-model="paramsData.threeTypeId">
          <a-tab-pane key="" tab="全部"> </a-tab-pane>
          <a-tab-pane key="1" tab="录制技术"> </a-tab-pane>
          <a-tab-pane key="2" tab="播出技术"> </a-tab-pane>
        </a-tabs>
      </div>
      <template slot="rightHtml" slot-scope="{ record }">
        <a-button
          class="flexCon"
          type="link"
          v-if="current_index % 2 != 0 && !istrue"
          @click="showPopup('opinion', record)"
        >
          <span class="fontS20">评审</span>
        </a-button>

        <a-button
          class="flexCon"
          type="link"
          v-if="istrue && current_index % 2 != 0"
          @click="showdia2(record)"
        >
          <span class="fontS20">打分</span>
        </a-button>

        <!-- <a-button
          class="flexCon"
          type="link"
          v-if="istrue && current_index % 2 == 0"
          @click="showdia2(record)"
        >
          <span class="fontS20">修改</span>
        </a-button> -->

        <div v-if="current_index % 2 == 0 && !istrue" class="flexLeft">
          <div v-if="paramsData.state == 4">
            <div class="flexBet fontS18 marR10">
              <a @click="showdia">投票</a>
            </div>
          </div>
          <div v-else>
            <div class="flexBet fontS18 marR10" v-if="!btnshowss">
              <a @click="showPopup('lookYJ', record)">查看我的意见</a>
            </div>
            <div class="flexBet fontS18" v-if="btnshowss">
              <a @click="showPopup('look', record)">查看组员意见</a>
            </div>
          </div>
        </div>
      </template>
    </tableTpl>
    <!-- popup -->
    <popup ref="popups" :title="popTitle" @confirm="popConfirm">
      <!-- 表格 -->
      <a-table
        slot="customCount"
        :customRow="customRow"
        :columns="crew"
        :data-source="crewData"
        :pagination="{ pageSize: 10 }"
        bordered
      >
        <span slot="sex" slot-scope="item">{{
          item.user.sex == 0 ? "男" : "女"
        }}</span>
        <div slot="state" slot-scope="item">
          <a-button class="flexCon" type="link" @click="outlook(item)">
            <span class="fontS20">{{
              item.appraisal ? "已通过" : "未通过"
            }}</span>
          </a-button>
          <a-button class="flexCon" type="link" v-if="item.isChange">
            <span class="fontS20">修改</span>
          </a-button>
        </div>
      </a-table>
    </popup>

    <popup ref="popups2" :title="popTitle2" @confirm="popConfirm2">
      <div slot="customCount">投票</div>
    </popup>

    <!-- popup -->
    <popup ref="popups3" :title="popTitle3" @confirm="popConfirm3">
      <div slot="customCount">
        <div v-if="!btnshow">
          <div class="fromwarp">
            <div class="fromwarpleft">图形分:</div>
            <div class="fromwarpright">
              <a-input
                v-model="evaluateImage"
                type="number"
                @blur="evaluateImageblur"
              />
            </div>
          </div>
          <div class="fromwarp">
            <div class="fromwarpleft">声音分:</div>
            <div class="fromwarpright">
              <a-input
                v-model="evaluateVoice"
                type="number"
                @blur="evaluateVoiceblur"
              />
            </div>
          </div>

          <div class="fromwarp">
            <div class="fromwarpleft">客观分打分备注:</div>
            <div class="fromwarpright">
              <!-- <a-input
                v-model="evaluateVoice"
                type="number"
                @blur="evaluateVoiceblur"
              /> -->

              <a-textarea
                v-model="evaluateRemark"
                allow-clear
              />
            </div>
          </div>
        </div>
        <div v-else>
          <div class="fromwarp">
            <div class="fromwarpleft">录音电平:</div>
            <div class="fromwarpright">
              <a-input
                v-model="evaluateRecordingLevel"
                type="number"
                @blur="evaluateRecordingLevelblur"
              />
            </div>
          </div>
          <div class="fromwarp">
            <div class="fromwarpleft">噪声:</div>
            <div class="fromwarpright">
              <a-input
                v-model="evaluateNoise"
                type="number"
                @blur="evaluateNoiseblur"
              />
            </div>
          </div>
          <div class="fromwarp">
            <div class="fromwarpleft">失真:</div>
            <div class="fromwarpright">
              <a-input
                v-model="evaluateDistortion"
                type="number"
                @blur="evaluateDistortionblur"
              />
            </div>
          </div>
          <div class="fromwarp">
            <div class="fromwarpleft">复接和剪接技术:</div>
            <div class="fromwarpright">
              <a-input
                v-model="evaluateMultiplex"
                type="number"
                @blur="evaluateMultiplexblur"
              />
            </div>
          </div>

          <div class="fromwarp">
            <div class="fromwarpleft">声道平衡:</div>
            <div class="fromwarpright">
              <a-input
                v-model="evaluateChannelBalance"
                type="number"
                @blur="evaluateChannelBalanceblur"
              />
            </div>
          </div>

          <div class="fromwarp">
            <div class="fromwarpleft">相位:</div>
            <div class="fromwarpright">
              <a-input
                v-model="evaluatePhase"
                type="number"
                @blur="evaluatePhaseblur"
              />
            </div>
          </div>

          <!-- <div class="fromwarp">
            <div class="fromwarpleft">广播电台呼号:</div>
            <div class="fromwarpright">
              <a-input
                v-model="evaluateBroadcasting"
                type="number"
                @blur="evaluateBroadcastingblur"
              />
            </div>
          </div> -->
        </div>
      </div>
    </popup>

    <popup
      ref="popup"
      title="提示"
      :count="popText"
      @confirm="popConfirm1"
    ></popup>
    <!-- 动态表单 -->
    <dynamic-form
      :formData="formData"
      :recordData="record"
      ref="dynamic"
      @confirm="getData()"
    />
  </div>
</template>

<script>
const crew = [
  {
    title: "序号",
    dataIndex: "key",
    width: 100,
  },
  {
    title: "专家姓名",
    dataIndex: "createName",
    width: 160,
  },
  {
    title: "时间",
    dataIndex: "createTime",
    width: 245,
  },
  {
    title: "意见",
    width: 149,
    dataIndex: "controlValue",
    // scopedSlots: { customRender: "state" },
  },
];

import popup from "../components/pop/popup.vue";
import dynamicForm from "../components/dynamicForm/dynamicForm.vue";
import tableTpl from "../components/tableTpl/tableTpl.vue";
import { mapState } from "vuex";
import {
  tasklist,
  getExpertappraisal,
  formDataSave,
  ByInstanceId,
  updateBaseInfo,
} from "@/api";
import { expert } from "@/assets/js/declare";

export default {
  components: {
    popup,
    tableTpl,
    dynamicForm,
  },
  provide() {
    return {
      leftList: expert,
    };
  },
  data() {
    return {
      tagsList: ["已评审", "待评审"], // tags 标签
      evaluateRecordingLevel: "",
      evaluateNoise: "",
      evaluateDistortion: "",
      evaluateMultiplex: "",
      evaluateChannelBalance: "",
      evaluatePhase: "",
      evaluateBroadcasting: "",

      current_nav_tag: 1, // 当前选中的tag
      data: [], //表格所需数据
      crew,
      istrue: false,
      btnshowss: false,
      crewData: [],
      current_type: "", // 当前点击的弹窗
      form: this.$form.createForm(this, { name: "coordinated" }),
      record: {}, // 当前操作的行数据
      popText: "",
      baseId: "",
      taskId: "",
      btnshow: false,
      paramsData: expert[0].child[0].dataType, // 接口参数
      current_index: expert[0].child[0].index,
      loading: false,
      popTitle2: "投票",
      popTitle3: "打分",
      evaluateImage: "",
      evaluateVoice: "",
      evaluateRemark:"",
      columns1: [
        // 单位推荐、形式审查、专家评审
        {
          title: "序号",
          dataIndex: "key",
          width: 80,
        },
        {
          title: "申报单位",
          dataIndex: "deptName",
          width: 150,
        },
        {
          title: "作品名称",
          width: 150,
          key: "name",
          slots: { title: "baseName" },
          scopedSlots: { customRender: "name" },
        },
        {
          title: "主要完成人",
          dataIndex: "doneUsers",
          width: 150,
        },
        {
          title: "奖项等级",
          dataIndex: "grade",
          width: 150,
          scopedSlots: { customRender: "grade" },
          // filters: [
          //   {
          //     text: "Joe",
          //     value: "Joe",
          //   },
          //   {
          //     text: "Jim",
          //     value: "Jim",
          //   },
          // ],
          filterMultiple: false,
        },
        // {
        //   title: '申请时间',
        //   dataIndex: 'createTime',
        //   width: 150,
        // },
        {
          title: "审核状态",
          dataIndex: "stateName",
          width: 150,
        },
        {
          title: "操作",
          key: "action",
          scopedSlots: { customRender: "action" },
          width: 190,
          fixed: "right",
        },
      ],
    };
  },
  created() {
    this.getData();
    console.log(JSON.parse(sessionStorage.getItem("userInfo")));
    if (
      JSON.parse(sessionStorage.getItem("userInfo")).nickName ==
      "质量奖初审管理员"
    ) {
      this.istrue = true;
    } else {
      this.istrue = false;
    }

    if (
      JSON.parse(sessionStorage.getItem("userInfo")).roles[0].roleKey == "zjzz"
    ) {
      this.btnshowss = true;
    } else {
      this.btnshowss = false;
    }
  },
  computed: {
    ...mapState(["columns", "formData"]),
    popTitle() {
      return this.current_type == "look"
        ? "查看组员"
        : this.current_type == "set"
        ? "修改"
        : "专家意见";
    },
  },
  methods: {
    changeItem(k) {
      console.log(k.dataType);
      this.paramsData = k.dataType;
      if (this.paramsData.twoTypeId == 1) {
        this.btnshow = false;
        this.columns1 = [
          // 单位推荐、形式审查、专家评审
          {
            title: "序号",
            dataIndex: "key",
            width: 80,
          },
          {
            title: "申报单位",
            dataIndex: "deptName",
            width: 150,
          },
          {
            title: "作品名称",
            width: 150,
            key: "name",
            slots: { title: "baseName" },
            scopedSlots: { customRender: "name" },
          },
          {
            title: "主要完成人",
            dataIndex: "doneUsers",
            width: 150,
          },
          {
            title: "类别",
            dataIndex: "kind",
            width: 150,
            scopedSlots: { customRender: "kind" },
            // filters: [
            //   {
            //     text: "Joe",
            //     value: "Joe",
            //   },
            //   {
            //     text: "Jim",
            //     value: "Jim",
            //   },
            // ],
            filterMultiple: false,
          },
          {
            title: "客观图形分（初评）",
            dataIndex: "evaluateImage",
            width: 150,
          },
          {
            title: "客观声音分（初评）",
            dataIndex: "evaluateVoice",
            width: 150,
          },
          {
            title: "主观分（复评）",
            dataIndex: "evaluationF",
            width: 150,
          },
          {
            title: "严重缺陷",
            dataIndex: "seriousBug",
            width: 150,
          },
          {
            title: "总分",
            dataIndex: "seriousBug",
            width: 150,
          },
          // {
          //   title: "联系人",
          //   dataIndex: "seriousBug",
          //   width: 150,
          // },
          // {
          //   title: "联系电话",
          //   dataIndex: "seriousBug",
          //   width: 150,
          // },
          // {
          //   title: '申请时间',
          //   dataIndex: 'createTime',
          //   width: 150,
          // },
          {
            title: "审核状态",
            dataIndex: "stateName",
            width: 150,
          },
          {
            title: "操作",
            key: "action",
            scopedSlots: { customRender: "action" },
            width: 190,
            fixed: "right",
          },
        ];
      } else if (this.paramsData.twoTypeId == 2) {
        this.btnshow = true;
        this.columns1 = [
          // 单位推荐、形式审查、专家评审
          {
            title: "序号",
            dataIndex: "key",
            width: 80,
          },
          {
            title: "申报单位",
            dataIndex: "deptName",
            width: 150,
          },
          {
            title: "作品名称",
            width: 150,
            key: "name",
            slots: { title: "baseName" },
            scopedSlots: { customRender: "name" },
          },
          {
            title: "主要完成人",
            dataIndex: "doneUsers",
            width: 150,
          },
          {
            title: "类别",
            dataIndex: "kind",
            width: 150,
            scopedSlots: { customRender: "kind" },
            // filters: [
            //   {
            //     text: "Joe",
            //     value: "Joe",
            //   },
            //   {
            //     text: "Jim",
            //     value: "Jim",
            //   },
            // ],
            filterMultiple: false,
          },
          {
            title: "录音电平",
            dataIndex: "evaluateRecordingLevel",
            width: 150,
          },
          {
            title: "噪声",
            dataIndex: "evaluateNoise",
            width: 150,
          },
          {
            title: "失真",
            dataIndex: "evaluateDistortion",
            width: 150,
          },
          {
            title: "复接和剪接技术",
            dataIndex: "evaluateMultiplex",
            width: 150,
          },
          {
            title: "声道平衡",
            dataIndex: "evaluateChannelBalance",
            width: 150,
          },
          {
            title: "相位",
            dataIndex: "evaluatePhase",
            width: 150,
          },
          // {
          //   title: "广播电台呼号",
          //   dataIndex: "evaluateBroadcasting",
          //   width: 150,
          // },
          // {
          //   title: "联系人",
          //   dataIndex: "seriousBug",
          //   width: 150,
          // },
          // {
          //   title: "联系电话",
          //   dataIndex: "seriousBug",
          //   width: 150,
          // },
          // {
          //   title: '申请时间',
          //   dataIndex: 'createTime',
          //   width: 150,
          // },
          {
            title: "审核状态",
            dataIndex: "stateName",
            width: 150,
          },
          {
            title: "操作",
            key: "action",
            scopedSlots: { customRender: "action" },
            width: 190,
            fixed: "right",
          },
        ];
      } else {
        this.columns1 = [
          // 单位推荐、形式审查、专家评审
          {
            title: "序号",
            dataIndex: "key",
            width: 80,
          },
          {
            title: "申报单位",
            dataIndex: "deptName",
            width: 150,
          },
          {
            title: "作品名称",
            width: 150,
            key: "name",
            slots: { title: "baseName" },
            scopedSlots: { customRender: "name" },
          },
          {
            title: "主要完成人",
            dataIndex: "doneUsers",
            width: 150,
          },
          {
            title: "奖项等级",
            dataIndex: "grade",
            width: 150,
            scopedSlots: { customRender: "grade" },
            // filters: [
            //   {
            //     text: "Joe",
            //     value: "Joe",
            //   },
            //   {
            //     text: "Jim",
            //     value: "Jim",
            //   },
            // ],
            filterMultiple: false,
          },
          // {
          //   title: '申请时间',
          //   dataIndex: 'createTime',
          //   width: 150,
          // },
          {
            title: "审核状态",
            dataIndex: "stateName",
            width: 150,
          },
          {
            title: "操作",
            key: "action",
            scopedSlots: { customRender: "action" },
            width: 190,
            fixed: "right",
          },
        ];
      }
      this.current_index = k.index;
      console.log(k, "kl");
      this.getData();
    },
    popConfirm2() {
      console.log(1);
    },
    showdia() {
      this.$refs.popups2.showPop();
    },
    // 获取页面数据
    async getData() {
      this.loading = true;
      const res = await tasklist(this.paramsData);
      this.loading = false;
      if (res.code != 200) return;
      res.rows.forEach((i, k) => {
        i.key = k + 1;
      });
      this.data = res.rows;
    },
    showdia2(e) {
      console.log(e);
      this.baseId = e.baseId;
      this.taskId = e.taskId;
      this.$refs.popups3.showPop();
      if (e.twoTypeId == 1) {
        this.btnshow = false;
      } else if (e.twoTypeId == 2) {
        this.btnshow = true;
      }

      console.log(this.taskId, "this.taskId+++++++=");
    },
    async popConfirm3() {
      // console.log(this.evaluateRemark)
      if (this.btnshow == false) {
        const res = await updateBaseInfo({
          baseId: this.baseId,
          evaluateImage: this.evaluateImage,
          evaluateVoice: this.evaluateVoice,
          evaluateRemark:this.evaluateRemark
        });
        if (res.code == 200) {
          this.$refs.popups3.hidePop();
          const res2 = await formDataSave(this.taskId, []);
          console.log(res2);
          this.$message.success("打分成功");
          this.getData();
        }
      } else {
        const res = await updateBaseInfo({
          baseId: this.baseId,
          evaluateRecordingLevel: this.evaluateRecordingLevel,
          evaluateNoise: this.evaluateNoise,
          evaluateDistortion: this.evaluateDistortion,
          evaluateMultiplex: this.evaluateMultiplex,
          evaluateChannelBalance: this.evaluateChannelBalance,
          evaluatePhase: this.evaluatePhase,
          evaluateBroadcasting: this.evaluateBroadcasting,
        });
        if (res.code == 200) {
          this.$refs.popups3.hidePop();
          const res2 = await formDataSave(this.taskId, []);
          console.log(res2);
          this.$message.success("打分成功");
          this.getData();
        }
      }
    },
    evaluateImageblur(e) {
      console.log(e);
      if (Number(e.target._value) > 5) {
        this.evaluateImage = 5;
      } else if (Number(e.target._value) < 0) {
        this.evaluateImage = 1;
      }
    },
    evaluateVoiceblur(e) {
      if (Number(e.target._value) > 5) {
        this.evaluateVoice = 5;
      } else if (Number(e.target._value) < 0) {
        this.evaluateVoice = 1;
      }
    },
    evaluateRecordingLevelblur(e) {
      if (Number(e.target._value) > 5) {
        this.evaluateRecordingLevel = 5;
      } else if (Number(e.target._value) < 0) {
        this.evaluateRecordingLevel = 1;
      }
    },
    evaluateNoiseblur(e) {
      if (Number(e.target._value) > 5) {
        this.evaluateNoise = 5;
      } else if (Number(e.target._value) < 0) {
        this.evaluateNoise = 1;
      }
    },
    evaluateDistortionblur(e) {
      if (Number(e.target._value) > 5) {
        this.evaluateDistortion = 5;
      } else if (Number(e.target._value) < 0) {
        this.evaluateDistortion = 1;
      }
    },
    evaluateMultiplexblur(e) {
      if (Number(e.target._value) > 5) {
        this.evaluateMultiplex = 5;
      } else if (Number(e.target._value) < 0) {
        this.evaluateMultiplex = 1;
      }
    },
    evaluateChannelBalanceblur(e) {
      if (Number(e.target._value) > 5) {
        this.evaluateChannelBalance = 5;
      } else if (Number(e.target._value) < 0) {
        this.evaluateChannelBalance = 1;
      }
    },
    evaluatePhaseblur(e) {
      if (Number(e.target._value) > 5) {
        this.evaluatePhase = 5;
      } else if (Number(e.target._value) < 0) {
        this.evaluatePhase = 1;
      }
    },
    evaluateBroadcastingblur(e) {
      if (Number(e.target._value) > 5) {
        this.evaluateBroadcasting = 5;
      } else if (Number(e.target._value) < 0) {
        this.evaluateBroadcasting = 1;
      }
    },
    // 显示pop弹窗
    showPopup(type, record) {
      console.log(record);
      this.record = record;
      this.current_type = type;
      switch (type) {
        case "look":
          getExpertappraisal(record.baseId).then((res) => {
            if (res.code != 200) return this.$message.error(res.msg);
            res.data.forEach((i, k) => {
              i.key = k + 1;
            });
            this.crewData = res.data;

            console.log(this.crewData, "this.crewData");
          });
          this.$refs.popups.showPop();
          break;
        case "opinion":
          this.$refs.dynamic.showForm();
          this.$store.dispatch("GET_USER_DATA", record.taskId);
          break;
        case "cx":
          this.popText = "是否确认撤销？";
          this.$refs.popup.showPop();
          break;
        case "lookYJ":
          ByInstanceId(record.baseId, 3).then((res) => {
            this.popText =
              res.data.length > 0
                ? res.data[0].formHistoryDataDTO[0].value
                : "暂无";
          });
          this.$refs.popup.showPop();
          break;
        // default:
        //   break;
      }
    },
    //设置表格隔行变色
    customRow(record, index) {
      return {
        style: {
          // 字体颜色
          color: record.remarkDesc ? record.remarkDesc.fontColor : "#262626",
          // 行背景色
          "background-color": index % 2 == 0 ? "#FFFFFF" : "#FAFAFA",
        },
      };
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
    // pop 确认事件
    async popConfirm() {
      switch (this.current_type) {
        case "opinion":
          // eslint-disable-next-line no-case-declarations
          const res = await formDataSave(this.record.taskId, this.formData);
          this.$message[res.code == 200 ? "success" : "error"](res.msg);
          if (res.code != 200) return;
          break;

        default:
          break;
      }
      this.$refs.popups.hidePop();
    },
    popConfirm1() {
      this.$refs.popup.hidePop();
    },
    // 查看组员 查看意见
    outlook(item) {
      console.log(item);
      this.popText =
        item.dataList.length > 0
          ? `${item.dataList[0].controlName}:${item.dataList[0].controlValue},
      ${item.dataList[1].controlName}:${item.dataList[1].controlValue},`
          : "暂无原因";
      this.$refs.popup.showPop();
    },
  },
};
</script>

<style>
.ant-select-selection--single {
  height: 42px;
}
.ant-select-selection__rendered {
  line-height: 42px;
}
.fromwarp {
  display: flex;
  align-items: center;
  margin-top: 24px;
}
.fromwarpleft {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fromwarpright {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>